<template>
  <view class="personal-name-page">
    <view class="form">
      <view class="form-item">
        <input
          class="input"
          name="name"
          v-model="sForm.name"
          placeholder="请输入您的昵称"
        />
      </view>
    </view>
    <view class="footer-btn" @click="save">
      <view class="btn-box">
        <text>确认</text>
      </view>
    </view>
  </view>
</template>

<script>
import WxValidate from "@/utils/WxValidate";
import { editAvatar, login } from "@/config/api";
import { mapActions } from "vuex";

export default {
  data() {
    return {
      sForm: {
        name: "",
      },
    };
  },
  onLoad() {
    this.sForm.name=this.userInfo.nickName
    this.initValidate();
  },
  methods: {
    ...mapActions({
      userInfo_onInit: "userInfo/onInit",
    }),
    initValidate() {
      const rules = {
        name: { required: true },
      };
      const message = {
        name: { required: "请输入姓名！" },
      };
      this.WxValidate = new WxValidate(rules, message);
    },
    save() {
      const isValidate = this.WxValidate.checkForm(this.sForm);
      if (!isValidate) {
        const errorList = this.WxValidate.errorList;
        uni.showToast({ title: errorList[0].msg, icon: "none" });
        return false;
      } else {
        editAvatar({
          userId: this.userInfo.userId,
          userName: this.userInfo.userName,
          nickName: this.sForm.name,
        }).then((res) => {
          uni.hideLoading();
          if (res.code === 200) {
            uni.showToast({ title: "保存成功！", icon: "none" });
            login().then((res) => {
              this.userInfo_onInit();
              this.toURL("", {}, { type: "back" });
            });
          } else {
            uni.showToast({ title: res.msg || "操作失败！", icon: "none" });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.personal-name-page {
  .form {
    margin-top: 40rpx;

    .form-item {
      position: relative;
      margin: 0rpx 32rpx 24rpx;
      height: 96rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 1px solid rgba(0, 0, 0, 0.2);

      input {
        height: 96rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        line-height: 96rpx;
      }
    }
  }

  .footer-btn {
    position: fixed;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    background: #ffffff;
    height: calc(124rpx + env(safe-area-inset-bottom));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 686rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
    }
    text {
      font-size: 32rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 32rpx;
    }
  }
}
</style>
